import React, {Component} from 'react';
import {Grid, Progress, Icon, Feedback} from '@icedesign/base';
import IceContainer from '@icedesign/container';
import Pie from '../Echart/Pie';
import Line from '../Echart/Line';
import Avatar from 'react-avatar';
import axios from 'axios';
const {Row, Col} = Grid;
const Toast = Feedback.toast;

/**
 * 图表
 * @author zhangby
 * @date 2018/6/20 下午4:31
 */
export default class ReviewDetailInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authorGroup: []
    }
  }

  componentWillMount() {
    axios.post('/api/getAuthorGroup').then((response) => {
      this.setState({authorGroup: response.data});
    }).catch((error) => {
      Toast.error(
        error.msg == undefined
        ? "系统错误"
        : error.msg);
    });
  }

  render() {
    return (<Row wrap={true} gutter={20}>
      <Col s="8" xxs="24">
        <IceContainer style={{
            height: 316,
            paddingLeft: 0
          }}>
          <h4 style={styles.hh4}>周更新</h4>
          <div style={styles.reviewTargetProgressWrapper}>
            <Line/>
          </div>
        </IceContainer>
      </Col>
      <Col s="8" xxs="24">
        <IceContainer style={{
            height: 316
          }} title="模块分组">
          <div style={styles.reviewTargetProgressWrapper}>
            <Pie/>
          </div>
        </IceContainer>
      </Col>
      <Col s="8" xxs="24">
        <IceContainer style={styles.container} title="参与人数">
          <div style={styles.reviewLeaderboard}>
            {
              this.state.authorGroup.map((item, i) => {
                return (<div style={styles.reviewLeaderboardItem} key={i}>
                  <span style={styles.reviewLeaderboardItemAvatar}>
                    {/* <img style={styles.reviewLeaderboardItemAvatarImg} width="40" height="40" src={item.headImg} alt=""/> */}
                    <Avatar size={40} textSizeRatio={1.75} round={true} name={item.author}/>
                  </span>
                  <span style={styles.reviewLeaderboardItemName}>{item.author}</span>
                  <span style={styles.reviewLeaderboardItemCount}>{item.num}个</span>
                </div>)
              })
            }
          </div>
        </IceContainer>
      </Col>
    </Row>);
  }
}

const styles = {
  container: {
    height: 316,
    overflowY: 'scroll'
  },
  hh4: {
    height: 16,
    lineHeight: '16px',
    fontSize: 16,
    color: "#333333",
    fontWeight: 'bold',
    margin: '0px 0px 20px',
    padding: 0,
    marginLeft: 20
  },
  reviewRatingWrapper: {
    padding: '20px 0'
  },
  reviewRatingDesc: {
    color: '#999',
    textAlign: 'center'
  },
  reviewRating: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  reviewRatingScore: {
    fontSize: 36,
    position: 'absolute',
    right: 'calc(100% + 20px)'
  },
  reviewRatingIcon: {
    position: 'relative',
    margin: '0 20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  reviewRatingRatePositive: {
    fontSize: 26,
    color: '#2ecc71',
    position: 'absolute',
    left: 'calc(100% + 20px)'
  },
  reviewRatingRateNegative: {
    fontSize: 26,
    color: '#e74c3c',
    position: 'absolute',
    left: 'calc(100% + 20px)'
  },
  reviewRatingIconPositive: {
    color: '#2ecc71'
  },
  reviewRatingIconNegative: {
    color: '#e74c3c'
  },
  reviewRatingDivideLine: {
    borderTop: '1px solid #eee',
    width: 100,
    margin: '0 auto'
  },
  reviewTargetProgressWrapper: {
    padding: '30px 0 20px 0',
    paddingTop: 0,
    display: 'flex',
    justifyContent: 'center'
  },
  reviewRatingGoalDesc: {
    textAlign: 'center'
  },
  reviewLeaderboardItem: {
    marginTop: 10,
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
    justifyContent: 'space-between'
  },
  reviewLeaderboardItemAvatar: {
    marginRight: 15
  },
  reviewLeaderboardItemAvatarImg: {
    borderRadius: '50%',
    display: 'block'
  },
  reviewLeaderboardItemName: {
    flex: 1
  }
};
